<template>
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="formdata.id" placeholder="请输入类目ID" clearable />
        </el-form-item>
        <el-form-item label="类目名称">
            <el-input v-model="formdata.name" placeholder="请输入类目名称" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--图片列表-->
    <el-table :data="categoryData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="90" />
        <el-table-column prop="name" label="类目名称" width="100" />
        <el-table-column prop="img" label="类目图片" width="100">
            <template #default="scope">
                <img :src="scope.row.img" width="50px" height="50px">
            </template>
        </el-table-column>
        <el-table-column prop="seq" label="类目排序" width="90" />
        <el-table-column prop="status" label="类目状态" width="90" />
        <el-table-column prop="parentId" label="父目录ID" width="90" />
        <el-table-column prop="lastUpdateBy" label="最后更新人" width="120" />
        <el-table-column fixed="right" label="操作" min-width="140">
            <template #default="scope">
                <el-button type="danger" size="small" @click="closeClick(scope.row)">
                    下线
                </el-button>
                <el-button type="warning" size="small" @click="handleClick(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background :page-size="pageData.pageSize" layout="total, prev, pager, next" :total="pageData.total"
        @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { ref,onMounted,reactive} from 'vue'
import {CategoryApi} from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter ,useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

const categoryData = ref([])
const formdata =reactive({
    id: '',
    name:''
})
const pageData = reactive({
    total:15,
    pageSize:3,
    pageNum:1
})


onMounted(()=>{
    CallCategoryApi()
})

const CallCategoryApi = () => {
    let id= formdata.id === '' ? undefined : formdata.id
    let name = formdata.name === '' ? undefined : formdata.name
    CategoryApi.select.call({
        id: id, name: name,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res:any)=>{
        console.log(res)
        categoryData.value = res.items
        pageData.total = res.total


    })
}
//搜索查询
const onSubmit = () => {
  console.log('submit!')
  CallCategoryApi()
}
// 下线按钮事件
const closeClick = (row:any) => {
    ElMessageBox.confirm(
        '确认要对 '+row.name+' 下线吗？',
        '警告⚠',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            CategoryApi.delete.call({id:row.id}).then(() => {
                ElMessage({
                    type: 'success',
                    message: '下线成功',
                })
             CallCategoryApi()
            })
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })

}

const handleClick = (row:any) => {
    console.log('click')
    router.push({ path: '/category/edit', query: { id: row.id, name: row.name } })
}

// 分页数据 val 当前页码
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pageData.pageNum = val
    //回调函数，重新请求数据
    CallCategoryApi()

}
</script>

<style scoped>

</style>